<template>
    <div class="components-wihte-header" :style="{'background': bgColor, 'color': color}">
        <div class="c-w-content pr">
            <img v-if="backImgType != 2" class="pa" src="../../../assets/img/common/icon-return-b@3x.png" alt="">
            <img v-if="backImgType == 2" class="pa" src="../../../assets/img/common/icon-denglu-fanhui-baise.png" alt="">
            <div @click="backClick" class="cwh-btn pa"></div>
            <h3 :style="{'color': color}">{{title}}</h3>
            <span class="pa">{{info}}</span>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Gheader',
    props: [
        'title',
        'info',
        'bgColor',
        'color',
        'backImgType'
    ],
    methods: {
        backClick() {
            this.$emit('go-back');
        }
    }
}
</script>

<style lang="less" scoped>
.pr {
    position: relative;
}
.pa {
    position: absolute;
}
.components-wihte-header {
    height: 1.32rem;
    width: 100%;
    background-color: #F8F8F8;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .c-w-content {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        // padding: 0 .54rem .42rem .45rem;
        text-align: center;
        &>img {
            left: .54rem;
            width: 0.3rem;
            height: 0.45rem;
        }
        &>h3{
            color: #333333;
            font-size: .48rem;
            font-weight: bold;
        }
        &>span {
            right: .54rem;
            font-size: .39rem;
            color: #FF640F;
        }
        .cwh-btn {
            left: .25rem;
            width: 1rem;
            height: 1rem;
        }
    }
}
</style>